<!--
 * @Author: your name
 * @Date: 2021-03-31 20:39:00
 * @LastEditTime: 2021-04-14 11:13:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \web\node\views\back\user_message.html
-->
<!-- 继承base基础模板 -->
{%  extends "back/base.html" %}

<!-- 留槽 样式 -->
{% block style %}
{% endblock %}

 <!-- 留槽 主要内容 -->
{% block body %}
<div class="container-fluid">
    <!-- 讲师资料 -->
    <div class="body teacher-profile">
        <div class="settings" id="seetings">
        </div>
        
    </div>
</div>
{% endblock %}

<!-- 留槽 脚本 -->
{% block script %}
<script>
    $(function () {
        //获取本地token
        let token = localStorage.getItem("token");

        //发起请求
        $.ajax({
            url: "http://localhost:3000/back/user/aip/u_msg_all/" + token,
            type: "get",
            success: function (data) {
                if (data.status === 200) {
                    //页面数据进行渲染
                    let tmp = `
                    <form id="user_form" action="http://localhost:3000/back/user/api/edit" method="post" class="form-horizontal" enctype="multipart">
                        <div class="form-group">
                            <label for="" class="col-md-3 control-label">姓名</label>
                            <div class="col-md-5">
                                <input name="real_name" type="text" class="form-control input-sm" value="${data.result[0].real_name}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-md-3 control-label">头像</label>
                            <div class="col-md-2 preview">
                                <img  id="icon_url" src="${data.result[0].icon_url ? '/uploads/' + data.result[0].icon_url : './uploads/avatar.png'}" style="border: 1px solid #e0e0e0;">
                                <input name="icon_url" type="file" id="upfile">
                                <div class="cover">
                                    <i class="fa fa-upload"></i>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-md-3 control-label">手机号码</label>
                            <div class="col-md-5">
                                <input id="phone" name="phone" type="text" class="form-control input-sm" value="${data.result[0].phone || ""}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-md-3 control-label">Email</label>
                            <div class="col-md-5">
                                <input id="e_mail" name="e_mail" type="text" class="form-control input-sm" value="${data.result[0].e_mail || ""}">
                            </div>
                        </div>
                        <!-- <div class="form-group">
                            <label for="" class="col-md-3 control-label">加入日期</label>
                            <div class="col-md-5">
                                <input type="date" class="form-control input-sm">
                            </div>
                        </div>   -->
                        <div class="form-group">
                            <label for="" class="col-md-3 control-label">自我介绍</label>
                            <div class="col-md-5 ckeditor">
                                <textarea name="intro_self" rows="15" class="form-control input-sm" >${data.result[0].intro_self || ""}</textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-8">
                                <button class="btn btn-danger pull-right btn_save">重新设置</button>
                                <a href="/back/u_reset_pwd" class="btn btn-link btn-success pull-right">修改密码？</a>
                            </div>
                        </div>
                    </form>
                    `
                    $("#seetings").html(tmp);


                    //上传图片加载处理
                    $("#upfile").on("change", function () {
                        let file = $(this).get(0).files[0];

                        let reader = new FileReader();
                        reader.readAsDataURL(file);

                        reader.onloadend = function () {
                            $("#icon_url").attr("src", reader.result);
                        }
                    })


                    //提交信息，对信息进行正则验证
                    $(".btn_save").on("click",function(){
                        let $phone = $("#phone"), $e_mail = $("#e_mail");

                        if(/^[1][3,5,8,9][0-9]{9}$/.test($phone.val()) === false){
                            alert("请输入正确的手机号码！");
                            $phone.val('');
                            return false;
                        }
                        if(/^\w+@[a-zA-Z0-9]{2,15}(?:\.[a-z]{2,4}){1,3}$/.test($e_mail.val()) === false){
                            alert("请输入正确的邮箱！");
                            $e_mail.val('');
                            return false;
                        }

                         //获取数据
                        let $user_form = $("#user_form");
                        let icon_url = $("#upfile").get(0).files[0] || data.result[0].icon_url;

                        console.log(icon_url)
                        let formData = new FormData($user_form.get(0));
                        formData.append("token",token);
                        formData.append("icon_url", icon_url)

                        //发起请求
                        $.ajax({
                            url: $user_form.attr('action'),
                            type: $user_form.attr('method'),
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function (data) {
                                console.log(data);
                                if (data.status === 200) { // 添加成功
                                    alert('个人信息修改成功!');
                                    window.location.href = '/back/u_center'
                                } else {
                                    alert('个人信息修改失败!');
                                }
                            }
                        });

                        return false;
                    })


                } else {
                    alert('数据请求失败!');
                }
            }
        });

    })
</script>
{% endblock %}
